import { Table, Space, Button, Modal, Pagination, Form, Input } from 'antd';
import Request from '../../utils/axios.request'
import { useState, useEffect } from 'react';
import scss from './user.module.scss'
interface Record {
    id: number,
    name: string,
    loginName: string,
    quota: string,
    createTime: string,
    updateTime: string
}

/**
 * 删除单个
 * @param record 
 */

const delUser = (record: Record): void => {
    Modal.info({
        title: "提示",
        content: "是否删除该用户",
        closable: true,
        maskClosable: true,
        onOk: () => {
            Request.deleteUser({ id: record.id })
        },
        onCancel: () => {

        }
    })

}

export default function User() {
    const [data, setData] = useState([])
    const [pagination, setPagination] = useState({ page: 1, pageSize: 10, total: 0, current: 1 })
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [disabled, setDisabled] = useState(false)
    const [user, setUser] = useState({ name: "", loginName: "", quota: "", createTime: "", updateTime: "" })
    const columns = [
        {
            title: '昵称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '登录名',
            dataIndex: 'loginName',
            key: 'loginName',
        },
        {
            title: '每月消费上限',
            dataIndex: 'quota',
            key: 'quota',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (record: Record) => (
                <Space size="middle">
                    <Button type="primary" onClick={() => { check(record) }}>查看</Button>
                    <Button type="primary">修改</Button>
                    <Button type="primary" danger onClick={() => { delUser(record) }}>删除</Button>
                </Space>
            ),
        },
    ];
    useEffect(() => {
        getUserPage()
    }, [])
    /**
 * 查看&修改
 * @param record 
 */

    const check = (record: Record): void => {

        // let { naem, loginName, quota, createTime, updateTime } = { ...record }
        setUser({ ...record })
        console.log(user)
        setIsModalVisible(true)
        setDisabled(true)
    }
    /**
     * 获取分页数据
     */
    const getUserPage = (): void => {
        Request.getUserPageList({ page: pagination.page, pageSize: pagination.pageSize }).then(res => {
            res.data.data.map((item: any) => item.quota /= 100)
            pagination.total = res.data.total
            pagination.current = res.data.current
            setPagination(pagination)
            setData(res.data.data)
        })
    }
    /**
     * 监听分页改变事件
     * @param page 
     * @param pageSize 
     */
    const change = (page: number, pageSize: number): void => {
        console.log('params', page, pageSize);
        pagination.page = page
        setPagination(pagination)
        getUserPage()
    }
    return (
        <>
            <Table columns={columns} dataSource={data} pagination={false} rowKey={(r: any) => r.id} />
            <Pagination onChange={change} current={pagination.current} total={pagination.total} className={scss.pagination} />
            <Modal title="查看用户" cancelText="取消" okText="确认" visible={isModalVisible} onOk={() => { setIsModalVisible(false) }} onCancel={() => { setIsModalVisible(false) }}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="昵称"
                    >
                        <Input disabled={disabled} value={user.name} />
                    </Form.Item>

                    <Form.Item
                        label="登录名"
                    >
                        <Input value={user.loginName} disabled={disabled} />
                    </Form.Item>
                    <Form.Item
                        label="每月消费上限	"
                    >
                        <Input value={user.quota} disabled={disabled} />
                    </Form.Item>
                    <Form.Item
                        label="用户创建时间	"
                    >
                        <Input value={user.createTime} disabled={disabled} />
                    </Form.Item>

                    <Form.Item
                        label="用户更新时间	"
                    >
                        <Input value={user.updateTime} disabled={disabled} />
                    </Form.Item>
                </Form>
            </Modal>
        </>

    )
}

